<template>
  <div class="con">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/demand' }"
          >需求列表</el-breadcrumb-item
        >
        <el-breadcrumb-item class="dangqian">需求详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="one">
        <div class="a">{{ detail.title }}</div>
        <div class="b">
          <span
            >发布时间：{{ detail.caAt ? detail.caAt.substring(0, 10) : "" }}
          </span>
          <span
            >发布来源：{{
              detail.status == 1 ? "商家" : detail.status == 2 ? "企业" : "个人"
            }}
          </span>
          <span>地区：{{ detail.city }}</span>
          <span>状态：{{ detail.userCount > 0 ? "已领取" : "未领取" }} </span>
          <span style="cursor:pointer;" @click="openalog"
            ><i class="el-icon-warning-outline"></i>举报</span
          >
        </div>
        <div class="c">{{ detail.intro }}</div>
        <template v-if="detail.stype == 1 ? false : true">
          <div class="d d1" v-if="detail.userCount == 0" @click="lingqu">
            领取
          </div>
        </template>

        <template v-if="detail.stype == 1 ? false : true">
          <div class="d d2" v-if="detail.userCount > 0">
            已领取
          </div>
        </template>

        <div class="e">已有{{ detail.count || 0 }}家领取</div>
      </div>

      <!-- 领取人信息 -->
      <template v-if="detail.count !== 0">
        <div class="two" v-for="(item, index) in detail.info" :key="index">
          <div class="a">领取人信息</div>
          <div class="b">姓名：{{ item.name }}</div>
          <div class="c">手机号：{{ item.phone }}</div>
          <el-button
            type="primary"
            size="mini"
            class="twoButton"
            @click="item.cooperation == 0 && hezuo(item)"
            :disabled="item.cooperation == 2 ? true : false"
            >{{
              item.cooperation == 1
                ? "已合作"
                : item.cooperation == 2
                ? "未合作"
                : "合作"
            }}</el-button
          >
        </div>
      </template>

      <!-- 发布人信息 -->
      <template v-if="detail.count !== 0">
        <div class="two" v-for="(item, index) in detail.yiLing" :key="index">
          <div class="a">发布人信息</div>
          <div class="b">姓名：{{ item.name }}</div>
          <div class="c">手机号：{{ item.phone }}</div>
        </div>
      </template>
    </div>
    <el-dialog title="举报信息" :visible.sync="dialogVisible">
      <el-form :model="form" label-width="100px">
        <el-form-item label="姓名">
          <el-input
            v-model="form.name"
            placeholder="请输入你的姓名"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            v-model="form.phone"
            placeholder="请输入你的手机号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            v-model="form.content"
            placeholder="请输入你要举报的内容"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="jubao">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      detail: {},
      dialogVisible: false,
      flag: true,
      ids: null,
      stype: this.$route.query.stype,
      form: {
        name: "",
        phone: "",
        content: "",
        status: 1
      }
    };
  },
  //注册组件
  components: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.isinput();
    if (this.$route.query.id) {
      this.getdetail();
    }
    // console.log(this.$route.query.stype);
    // console.log(this.stype);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //计算属性
  computed: {},
  //方法
  methods: {
    isinput() {
      this.$store.commit("setDValue", false);
    },
    getdetail() {
      if (localStorage.getItem("userId")) {
        this.$postRequest("/api/mallNeed/getNeedInfo", {
          userId: localStorage.getItem("userId"),
          needId: this.$route.query.id
        }).then(res => {
          this.detail = res.data;
          var stype = this.stype;
          this.detail.stype = stype;
          console.log(this.detail);
          // console.log(this.detail);
          // this.detail.push(this.stype);
          // console.log(this.detail);
        });
      } else {
        this.$router.push("/login");
      }
    },
    lingqu() {
      if (localStorage.getItem("userId")) {
        this.$postRequest("/api/mallNeed/receiveNeed", {
          userId: localStorage.getItem("userId"),
          needId: this.detail.id
        }).then(res => {
          this.$message.success("领取成功");
          this.getdetail();
        });
      } else {
        this.$router.push({
          name: "loginindex",
          params: { name: "releaseitem", id: this.detail.id }
        });
      }
    },
    openalog() {
      this.dialogVisible = true;
    },
    jubao() {
      var tellreg = /^1[0-9]{10}$/;
      if (!this.form.name) {
        this.$message.error("请输入你的姓名");
      } else if (!this.form.phone) {
        this.$message.error("请输入你的手机号");
      } else if (!this.form.content) {
        this.$message.error("请输入你要举报的内容");
      } else if (!tellreg.test(this.form.phone)) {
        this.$message({
          message: "手机号错误，请检查后重新填写",
          type: "warning"
        });
      } else {
        this.form.type = "1";
        this.form.backId = this.detail.id;
        this.$postRequest("/api/trotocol/saveFeedback", this.form).then(res => {
          this.$message.success("举报成功");
          this.dialogVisible = false;
        });
      }
    },

    // 点击合作弹出框
    hezuo(item) {
      this.$confirm("是否继续合作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.queHeZuo(item);
      });
    },

    // 合作弹出框确定
    queHeZuo(item) {
      this.$postRequest("/api/mallNeed/finishNeed", {
        userId: localStorage.getItem("userId"),
        needId: this.detail.id,
        uid: item.id
      }).then(res => {
        console.log(res);
        this.$message.success(res.msg);
        if (res.code == 0) {
          this.getdetail();
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  background-color: #f9f9f9;
  & > div {
    width: 1400px;
    min-height: 560px;
    margin: auto;
    /deep/ .el-breadcrumb {
      height: 48px;
      font-size: 14px;
      line-height: 48px;
      .el-breadcrumb__inner {
        color: #999;
        font-weight: 500;
      }
      .dangqian .el-breadcrumb__inner {
        color: #1a69e0;
      }
    }
    .one {
      width: 100%;
      background: #ffffff;
      border: 1px solid #eeeeee;
      padding: 30px 40px;
      .a {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        margin-bottom: 20px;
      }
      .b {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        margin-bottom: 30px;
        span {
          margin-right: 30px;
        }
      }
      .c {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 20px;
        margin-bottom: 30px;
      }
      .d {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        margin-bottom: 20px;
      }
      .d1 {
        background: #1a69e0;
        color: #ffffff;
      }
      .d2 {
        background: #eeeeee;
        color: #000000;
      }
      .e {
        width: 120px;
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 20px;
      }
    }
    .two {
      position: relative;
      width: 100%;
      background: #ffffff;
      border: 1px solid #eeeeee;
      margin: 20px 0;
      padding: 30px 40px;
      .a {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        margin-bottom: 28px;
      }
      .b {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        margin-bottom: 18px;
      }
      .c {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
      .twoButton {
        position: absolute;
        right: 40px;
        top: 50%;
      }
    }
  }
}
</style>